<template>
  <div class="page-container">
    <div class="page-header">
      <h2>添加商品</h2>
      <p>请填写商品信息并提交</p>
    </div>

    <!-- 商品信息表单 -->
    <el-form
        ref="productFormRef"
        :model="productForm"
        :rules="rules"
        label-width="120px"
        class="product-form"
    >
      <!-- 商品名称 -->
      <el-form-item label="商品名称" prop="prod_name">
        <el-input
            v-model="productForm.prod_name"
            placeholder="请输入商品名称"
            clearable
        />
      </el-form-item>

      <!-- 商品分类 -->
      <el-form-item label="商品分类" prop="category">
        <el-select
            v-model="productForm.category"
            placeholder="请选择分类"
            clearable
        >
          <el-option
              v-for="item in categoryOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>

      <!-- 商品价格 -->
      <el-form-item label="商品价格" prop="price">
        <el-input
            v-model.number="productForm.price"
            placeholder="0.00"
            @input="formatPrice"
            clearable
        />
      </el-form-item>

      <!-- 库存数量 -->
      <el-form-item label="库存数量" prop="store">
        <el-input
            v-model.number="productForm.store"
            placeholder="请输入库存数量"
            clearable
        />
      </el-form-item>

      <!-- 商品信息 -->
      <el-form-item label="商品信息">
        <el-input
            v-model="productForm.prod_desc"
            type="textarea"
            placeholder="请输入商品详细信息（最多200字）"
            :maxlength="200"
            show-word-limit
            rows="4"
            clearable
        />
      </el-form-item>

      <!-- 商品主图（单图上传，上传后隐藏添加框，仅保留预览） -->
      <el-form-item label="商品主图" prop="image_url">
        <el-upload
            class="single-image-upload"
            :file-list="fileList"
            list-type="picture-card"
            :auto-upload="false"
            :on-change="handleFileChange"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            accept="image/*"
        >
          <!-- 有图片时隐藏添加框，无图片时显示 -->
          <div class="el-upload--picture-card" v-if="fileList.length === 0">
            <i class="el-icon-plus" />
          </div>
        </el-upload>
      </el-form-item>

      <!-- 商品状态 -->
      <el-form-item label="商品状态">
        <el-radio-group v-model="productForm.status">
          <el-radio :label="1">上架</el-radio>
          <el-radio :label="0">下架</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 最终提交按钮 -->
      <el-form-item>
        <el-button
            type="primary"
            @click="handleFinalSubmit"
        >
          保存商品
        </el-button>
        <el-button
            type="info"
            @click="cancelForm"
            class="ml-4"
        >
          取消
        </el-button>
      </el-form-item>
    </el-form>

    <!-- 图片预览弹窗 -->
    <el-dialog
        v-model="previewVisible"
        title="图片预览"
        width="800px"
    >
      <img
          :src="previewUrl"
          alt="商品图片预览"
          class="preview-img"
          style="width: 100%"
      />
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElMessageBox, ElForm, ElFormItem,
  ElInput, ElSelect, ElOption, ElRadioGroup, ElRadio,
  ElButton, ElUpload, ElDialog } from 'element-plus'

import router from '@/router/index.js'
import ProductApi from '@/api/Product.js'
// 限制图片最大为 2M，单位字节（1* 1024 * 1024）
const MAX_IMAGE_SIZE =  1024 * 1024;
// 商品表单数据
const productForm = reactive({
  prod_name: '',
  category: '',
  price: 0.0,
  store: 0,
  prod_desc: '',
  image_url: '',
  status: 1,
  is_deleted: 0,
})

// 表单校验规则
const rules = {
  prod_name: [
    { required: true, message: '商品名称不能为空', trigger: 'blur' },
    { max: 100, message: '商品名称最多100个字符', trigger: 'blur' },
  ],
  category: [
    { required: true, message: '请选择商品分类', trigger: 'change' },
  ],
  price: [
    { required: true, message: '商品价格不能为空', trigger: 'blur' },
    {
      pattern: /^\d+(\.\d{1,2})?$/,
      message: '请输入合法价格（最多两位小数）',
      trigger: 'blur'
    }
  ],
  store: [
    { required: true, message: '库存数量不能为空', trigger: 'blur' },
    { type: 'number', message: '库存数量必须为数字', trigger: 'blur' },
  ],
  image_url: [
    { required: true, message: '请上传商品主图', trigger: ['change', 'blur'] }
  ]
}

// 分类选项
const categoryOptions = ref([
  { label: '手机数码', value: '手机数码' },
  { label: '家用电器', value: '家用电器' },
  { label: '美妆个护', value: '美妆个护' },
  { label: '食品生鲜', value: '食品生鲜' },
  { label: '家居家装', value: '家居家装' },
  { label: '图书音像', value: '图书音像' },
  { label: '运动户外', value: '运动户外' },
  { label: '母婴玩具', value: '母婴玩具' },
  { label: '汽车用品', value: '汽车用品' },
  { label: '虚拟服务', value: '虚拟服务' },
  { label: '其他', value: '其他' },
])

// 表单引用
const productFormRef = ref(null)

// 上传相关
const fileList = ref([])
const previewVisible = ref(false)
const previewUrl = ref('')


// 限制只能选择一张图片，选择后 fileList 就只有一个文件
const handleFileChange = (file, newFileList) => {
  // 新增：文件大小校验
  if (file.size > MAX_IMAGE_SIZE) {
    ElMessage.error(`图片大小不能超过 ${MAX_IMAGE_SIZE / 1024 / 1024}M，请重新选择`);
    // 若超限，不将该文件加入列表
    return;
  }
  // 若选择多张，只保留最后一个
  if (newFileList.length > 1) {
    newFileList = [newFileList[newFileList.length - 1]]
    ElMessage.info('最多只能上传一张图片')
  }
  fileList.value = newFileList.map(item => ({...item, status: 'ready' }))
}

// 预览图片
const handlePreview = (file) => {
  previewUrl.value = file.url || (file.raw ? URL.createObjectURL(file.raw) : '')
  previewVisible.value = true
}

// 移除图片，移除后 fileList 为空，会重新显示添加框
const handleRemove = (file, newFileList) => {
  ElMessageBox.confirm(
      '确定移除该图片吗？',
      '提示',
      { type: 'warning' }
  ).then(() => {
    fileList.value = newFileList
    productForm.image_url = ''
  }).catch(() => {
    ElMessage.info('已取消移除')
  })
}

// 手动提交图片到后端，上传成功后给 productForm.image_url 赋值
const handleSubmitFiles = async () => {
  if (fileList.value.length === 0|| !fileList.value[0].raw) {
    ElMessage.warning('请先选择图片')
    return
  }
const avatar =await ProductApi.uploadAvatar(fileList.value[0].raw);  // 上传图片，返回地址
  console.log("输出"+avatar)
  console.log(avatar);
  productForm.image_url = avatar; //将返回的图片地址给表单数据
}

// 价格格式化
const formatPrice = (val) => {
  // 1. 过滤非法字符 + 格式化两位小数
  let processed = val
      .replace(/[^\d.]/g, '')          // 仅保留数字和小数点
      .replace(/\.{2,}/g, '.')         // 合并连续小数点
      .replace('.', '$#$')
      .replace(/\./g, '')
      .replace('$#$', '.')
      .replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); // 截断到两位小数

  // 2. 补充两位小数（如 123 → 123.00）
  const [integer, decimal] = processed.split('.');
  if (!decimal) processed += '.00';       // 无小数位
  else if (decimal.length === 1) processed += '0'; // 一位小数

  // 3. 转为数字类型（保留两位小数）
  productForm.price = Number(parseFloat(processed).toFixed(2));
};

// 最终提交商品，会先校验表单，再提交商品信息（含图片地址）
const handleFinalSubmit = async () => {
  productFormRef.value.validate;
  if (!isFormReady.value) {
    ElMessage.warning('请填写必要的商品信息')
    return
  }
      // 若还没手动提交图片，这里可自动触发提交
        await handleSubmitFiles()
        await ProductApi.addProduct(productForm) //调用添加商品的方法
        // 重置表单
        productFormRef.value.resetFields()
        fileList.value = []
        productForm.image_url = ''
  productForm.prod_desc = ''
}

// 取消操作
const cancelForm = () => {
  router.push({ name: 'ProductList' })
}

// 表单是否可提交（主要是表单基本信息是否填了）
const isFormReady = computed(() => {
  return productForm.prod_name && productForm.category && productForm.price && productForm.store
})
</script>

<style scoped>
.page-container {
  padding: 24px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  margin: 20px;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h2 {
  font-size: 20px;
  font-weight: 600;
  color: #8e8c8c;
  margin-bottom: 8px;
}

.page-header p {
  color: #999;
}

.product-form {
  max-width: 800px;
}

/* 上传按钮样式，和 Element Plus 原生照片墙风格适配 */
.single-image-upload {
  display: inline-block;
}

.single-image-upload .el-upload--picture-card {
  width: 160px;
  height: 160px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  background-color: #fafafa;
  transition: border-color 0.3s;
}

.single-image-upload .el-upload--picture-card:hover {
  border-color: #409eff;
}

.single-image-upload .el-icon-plus {
  font-size: 28px;
  color: #8c8c8c;
  line-height: 160px;
}

/* 隐藏上传组件默认的提示文字 */
.el-upload__text {
  display: none;
}

.submit-oss-btn {
  margin-top: 16px;
  margin-left: 120px;
}

/* 已上传图片的预览样式，和添加框大小保持一致 */
.el-upload-list__item {
  width: 160px;
  height: 160px;
}
</style>